<template>
  <div class="box">
    <div class="header-box">
      <div :class="['menu', menuChose == 0 ? 'menuAct' : '']" @click="changeMenu(0)">
        {{ nav.Attributes }}
      </div>
      <div :class="['menu', menuChose == 1 ? 'menuAct' : '']" @click="changeMenu(1)">
        {{ nav.Certifications }}
      </div>
      <div :class="['menu', menuChose == 2 ? 'menuAct' : '']" @click="changeMenu(2)">
        {{ nav.UserReviews }}
      </div>
    </div>
    <div class="attributes-box" v-if="!menuChose">
      <div class="attributes-list" v-for="item in proData.spuAttributeRespVOS" :key="item.id">
        <div class="attributes-list-header">{{ item.attributeName }}</div>
        <div class="attributes-list-context">{{ item.value || "-" }}</div>
      </div>
    </div>
    <div class="description" v-if="!menuChose">
      <span class="descriptionp-text">{{ language.nav.productDescription }}</span>
    </div>
    <div v-if="!menuChose" class="content-b">
      <div v-html="proData.description"></div>
    </div>

    <div v-else-if="menuChose === 1" class="cer-box">
      <swiper
        :loop="true"
        :slidesPerView="4"
        :modules="modules"
        :pagination="{
          clickable: true,
        }"
        :navigation="true"
        class="view-box-context"
      >
        <swiper-slide v-for="(item, index) in swiperList" :key="index">
          <img v-if="item === 1" class="imgs" src="/image/detail/c1.png" alt="" />
          <img v-if="item === 2" class="imgs" src="/image/detail/c2.png" alt="" />
          <img v-if="item === 3" class="imgs" src="/image/detail/c3.png" alt="" />
          <img v-if="item === 4" class="imgs" src="/image/detail/c4.png" alt="" />
        </swiper-slide>
      </swiper>
    </div>
    <div v-else>
      <div class="review-box" v-for="(item, index) in reviewList" :key="index">
        <img class="avatar" :src="item.userAvatar" alt="" />
        <div>
          <div class="name">{{ item.userNickname }}</div>
          <div class="model">
            {{ nav.productModel }}:{{ item.skuProperties[0].propertyName
            }}{{ item.skuProperties[0].valueName }}
          </div>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation } from "swiper/modules";
import "swiper/css/bundle";
import "swiper/css/navigation";
import { language } from "~/conf";
const { nav } = language;
type Tproperty = {
  propertyName: string;
  valueName: string;
};
type Tsku = {
  picUrl: string;
  id: number;
  price: number;
  stock: number;
  volume: number;
  weight: number;
  material: string;
  properties: Tproperty[];
};
type TproData = {
  sliderPicUrls: string[];
  name: string;
  salesCount: number;
  skus: Tsku[];
  spuAttributeRespVOS: {
    attributeName: string;
    value: string;
    id: number;
  }[];
  description: string;
  id: number;
};
const props = defineProps<{
  proData: TproData;
}>();
const modules = [Navigation];
let menuChose = ref(0);
let swiperList = ref([1, 2, 3, 4]);
let reviewList = ref<Treview[]>([]);
type TskuTie = {
  propertyId: number;
  propertyName: string;
  valueId: number;
  valueName: string;
};

type Treview = {
  userAvatar: string;
  content: string;
  createTime: string;
  userNickname: string;
  picUrls: string[];
  additionalContent: string;
  additionalPicUrls: string[];
  additionalTime: string;
  skuProperties: TskuTie[];
};
const changeMenu = async (index: number) => {
  if (index == 2) {
    const { data } = await useServerFetch<{ list: Treview[] }>("/app-api/product/comment/page", {
      method: "POST",
      params: {
        spuId: props.proData.id,
        type: 0,
        pageNo: 1,
        pageSize: 20,
      },
    });
    reviewList.value = data.list;
  }
  menuChose.value = index;
};
</script>
<style lang="stylus" scoped>
.fs{
  display:flex;
  justify-content flex-start
  align-items center
}
.attributes-box{
  width 1007px
  margin 0 auto
  display flex
  flex-wrap wrap
  border 1px solid #E1E1E1;
  .attributes-list{
    width 335px
    display flex
    height 44px
    align-items center
    font-size 14px
    line-height 44px
    .attributes-list-header{
      width 135px
      height 44px
      color #666666
      text-align center
      background #E1E1E1
      border-bottom 1px solid #E1E1E1;
      white-space: nowrap; /* 确保文本在一行内显示 */
      overflow: hidden; /* 隐藏超出div范围的内容 */
      text-overflow: ellipsis;
    }
    .attributes-list-context{
      color #111
      width 175px
      height 44px
      border-bottom 1px solid #E1E1E1;
      padding-left 25px
      white-space: nowrap; /* 确保文本在一行内显示 */
      overflow: hidden; /* 隐藏超出div范围的内容 */
      text-overflow: ellipsis;
    }
  }
}
.description{
  color #000
  margin 10px auto 0
  border-bottom 1px #E1E1E1 solid
  height 50px
  line-height 50px
  font-size 16px
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 16px;
  .descriptionp-text{
    margin-left 37px;
  }
}
.l-name{
  width: 115px;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 37px;
}
.l-cont{
  font-weight: 400;
  font-size: 14px;
  color: #111111;
  line-height: 37px;
}
.box{
    .header-box{
      margin-top 50px;
      display:flex;
      justify-content:flex-start;
      align-items:center;
      padding-left:37px
      margin-bottom 26px
      border-bottom 1px solid #E1E1E1
    }
    .menu{
      font-weight: bold;
      font-size: 16px;
      padding-bottom:18px
      margin-right 52px
      cursor pointer
    }
    .menuAct{
      padding-bottom:16px
      border-bottom 2px solid #000
    }
    .content-b{
      padding 25px 37px
      display flex;
      justify-content:space-between;
      align-items:flex-start;
      .c-box{
        .c-cont{
          width 29.5vw
          min-width 319px
        }
      }
      .r-box{
        .l-name{
          width 179px
        }
      }
    }
    .cer-box{
      padding 0 37px
    }
    .review-box{
      display:flex;
      justify-content:flex-start;
      align-items:flex-start;
      padding-left:52px
      .avatar{
        width 42px
        height 42px
        margin-right 15px
        border-radius 50%
      }
      .name{
        font-size: 14px;
        color: #111111;
        margin-bottom 5px
      }
      .model{
        font-size: 14px;
        color: #666666;
        margin-bottom 5px
      }
      .content{
        font-size: 14px;
        color: #111111;
        margin-bottom 5px
      }
    }
}
.imgs{
  width 201px
}
</style>
